$switch-prefix-cls: "#{$css-prefix}switch";

.#{$switch-prefix-cls} {
    display: inline-block;
    width: $switch-width;
    height: $switch-height;
    line-height: $switch-line-height;
    border-radius: $switch-border-radius;
    vertical-align: middle;
    border: 1px solid $switch-border-color;
    background-color: $switch-background-color;
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: all $transition-time $ease-in-out;
    &-inner {
        color: $switch-inner-color;
        font-size: $font-size-small;
        position: absolute;
        left: $switch-inner-left;
        i {
            width: $switch-inner-i-width;
            height:$switch-inner-i-height;
            text-align: center;
        }
    }
    .slide {
        content: '';
        width: $switch-slide-width;
        height: $switch-slide-height;
        border-radius: $switch-slide-border-radius;
        background-color:$switch-slide-border-background-color;
        position: absolute;
        left: 1px;
        top: 1px;
        cursor: pointer;
        transition: left $transition-time $ease-in-out, width $transition-time $ease-in-out;
    }
    &:active {
        .slide {
            width: $switch-active-slide-width;
        } 
    }
    &:focus {
        box-shadow: 0 0 0 2px fade($primary-color, 20%);
        outline: 0;
    }
    &:focus:hover {
        box-shadow: none;
    }
    &-checked {
        border-color: $primary-color;
        background-color: $primary-color;

        .#{$switch-prefix-cls}-inner {
            left: $switch-checked-inner-left;
        }
        .slide {
            left: $switch-checked-slide-left;
        }
        &:active .slide {
           left:$switch-checked-active-slide-left; 
        }  
    }
    &-info.#{$switch-prefix-cls}-checked {
        border-color: $info-color;
        background-color: $info-color;
    }
    &-success.#{$switch-prefix-cls}-checked {
        border-color: $success-color;
        background-color: $success-color;
    }
    &-warning.#{$switch-prefix-cls}-checked {
        border-color: $warning-color;
        background-color: $warning-color;
    }
    &-error.#{$switch-prefix-cls}-checked {
        border-color: $error-color;
        background-color: $error-color;
    }
    &-small {
        width: $switch-small-width !important;
        height: $switch-small-height!important;
        line-height: $switch-small-line-height!important;
        .slide {
            width: $switch-small-slide-width !important;
            height: $switch-small-slide-height !important;
        }
        &:active .slide {
            width: $switch-small-slide-width !important;
        }
    }
    &-small.#{$switch-prefix-cls}-checked {
        .slide {
            left: $switch-small-checked-slide-left!important;
        } 
    }
    &-small:active.#{$switch-prefix-cls}-checked {
        .slide {
            left: $switch-small-active-checked-slide-left!important;
        }  
    }
    &-large {
        width: $switch-large-width!important;
        &:active .slide {
            width: $switch-large-slide-width!important;
        }
    }
    &-large.#{$switch-prefix-cls}-checked {
        .slide {
            left: $switch-large-checked-slide-left!important;
        }
    }
    &-large:active.#{$switch-prefix-cls}-checked {
        .slide {
            left: $switch-large-active-checked-slide-left!important;
        }
    }
    &-disabled {
        cursor: $cursor-disabled;
        background: $switch-disabled-background-color;
        border-color: $switch-disabled-border-color;
        .slide {
            background: $switch-disabled-slide-background;
            cursor: $cursor-disabled;
        }
        .#{$switch-prefix-cls}-inner {
            color: $switch-disabled-inner-color;
        }
    }
}
